<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三维图</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#content{
				width: 300px;
				height: 300px;
				margin: 200px auto;
				/*border: 1px solid red;*/
				perspective: 800px;
			}
			#box{
				width: 100%;
				height: 100%;
				position: relative;
				transform-style: preserve-3d;
				/*transition: all 3s linear;*/
				animation: an 2s linear infinite;
			}
			#box:hover{
				/*transform: rotateY(270deg);*/
				animation-play-state: paused;
		    }
		    @keyframes an{
		    	/*0%{
		    		transform: rotate3d(1,1,1,0deg);
		    	}
		    	25%{
		    		transform: rotate3d(1,1,1,90deg);
		    	}
		    	50%{
		    		transform: rotate3d(1,1,1,180deg);
		    	}
		    	75%{
		    		transform: rotate3d(1,1,1,270deg);
		    	}
		    	100%{
		    		transform: rotate3d(1,1,1,360deg);
		    	}*/
		    	0%{
		    		transform: rotateX(0deg) rotateZ(0deg);
		    	}
		    	25%{
		    		transform: rotateX(90deg) rotateZ(90deg);
		    	}
		    	50%{
		    		transform: rotateX(180deg) rotateZ(180deg);
		    	}
		    	75%{
		    		transform: rotateX(270deg) rotateZ(270deg);
		    	}
		    	100%{
		    		transform: rotateX(360deg) rotateZ(360deg);
		    	}
		    }
			#box li{
				list-style: none;
				width: 100%;
				height: 100%;
				opacity: 1;
				position: absolute;
			}
			#box li:nth-child(1){
				/*上*/
				height: 300px;
				background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2524972595,2173922060&fm=23&gp=0.jpg);
				top:-300px;
				transform: rotateX(-90deg);
				transform-origin: bottom;
			}
			#box li:nth-child(2){
				/*左*/
				width: 300px;
				background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488958286538&di=156449b20cdc81cf4c53735a1e39c287&imgtype=0&src=http%3A%2F%2Fwww.zgqydx.cn%2Ftupian%2F269352.jpg.jpg);
				left: -300px;
				transform: rotateY(90deg);
				transform-origin: right;
			}
			#box li:nth-child(3){
				/*中*/
				background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488958319153&di=3c416422813354816dab1c000100a14a&imgtype=0&src=http%3A%2F%2Fimg.huachitour.com%2Ftop%2Fuploads%2Fallimg%2F20160524%2F105022_58498.jpg);
				/*background: yellow;*/
			}
			#box li:nth-child(4){
				/*右*/
				width: 300px;
				background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=948358879,1745790016&fm=23&gp=0.jpg);
				left: 300px;
				transform: rotateY(-90deg);
				transform-origin: left;
			}
			#box li:nth-child(5){
				/*下*/
				height: 300px;
				background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488958361120&di=2e6d15a4c8846af31e95867228fc81dd&imgtype=0&src=http%3A%2F%2Fi2.sanwen.net%2Fdoc%2F1608%2F704-160Q2093332.jpg);
				top: 300px;
				transform: rotateX(90deg);
				transform-origin: top;
			}
			#box li:nth-child(6){
				/**/
				background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488958359969&di=41b94d08ea99050c57612123f62ae878&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_4_65072190D1362279898_23.jpg);
				/*background: red;*/
				transform: translateZ(300px)
			}
		</style>
	</head>
	<body>
		<div id="content">
			<ul id="box">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
	</body>
</html>
